<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
</head>
<body>
<a href="employee_add.html"><input type="button" value="新增"></a><br>
<hr>
<table id="brandTable" border="1" cellspacing="0" width="100%">
    <tr>
        <td bgcolor="#A3E6DF">id</td>
        <td bgcolor="#A3D7E6">姓名</td>
        <td bgcolor="#A3CCE6">电话</td>
        <td bgcolor="#A3CCE6">部门名称</td>
    </tr>

</table>

<script src="js/axios-0.18.0.js"></script>
<script>
    //1. 当页面加载完成后，发送ajax请求
    window.onload = function () {
        //2. 发送ajax请求
        axios({
            method:"get",
            url:"http://localhost:8088/ems-ruanjian233-99/getAllEmployees"
        }).then(function (resp) {
            //获取数据
            let list = resp.data;
            let tableData = " <tr>\n" +
                "        <th>id</th>\n" +
                "        <th>姓名</th>\n" +
                "        <th>电话</th>\n" +
                "        <th>部门名称</th>\n" +
                "    </tr>";

            for (let i = 0; i < list.length ; i++) {
                let obj = list[i];

                tableData += "\n" +
                    "    <tr align=\"center\">\n" +
                    "        <td>"+obj.id+"</td>\n" +
                    "        <td>"+obj.name+"</td>\n" +
                    "        <td>"+obj.phone+"</td>\n" +
                    "        <td>"+obj.departmentName+"</td>\n" +
                    "    </tr>";
            }

            // 设置表格数据
            document.getElementById("brandTable").innerHTML = tableData;
        })
    }
</script>
</body>
</html>